<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>作业2</title>
    <link rel="stylesheet" href="homework2.css">
</head>

<body>
<div class="all">
    <div class="welcome"><h3 style="color: #2420b5 ;">欢迎注册会员</h3></div>
    <form action="homework.html" method="post">
        <div>
            <label>
                <b>手机号码：</b>
                <input type="tel" name="phone" placeholder="11位手机号" maxlength="11" required="必填" class="tip">
                <span class="required">必填</span>
                <br>
            </label>
        </div>

        <div>
            <label><b>创建密码：</b>
            <input type="password" name="pwd" placeholder="8位密码" required="必填" span="8" class="tip">
                <span class="required">必填</span><br>
            </label>
        </div>

        <div>
            <label><b>输入邮箱：</b>
            <input type="email" name="email" placeholder="例如：wust@sina.com" class="tip">
            <span class="required">必填</span>
            <br>
            </label>
        </div>

        <div>
            <label><b> 验证码：</b>
                <input type="text">
                <span class="required"></span>
                <br>
        </label>

        </div>
        <div><label class="box"><b> 性别： </b></label>
            <label><input type="radio" name="sex" value="male" checked="checked" class="tip">男</label>
            <label><input type="radio" name="sex" value="female" class="tip">女<br></label></div>

        <div>
          <label >
            <b>生日：</b>
            <input type="date" name="mydate" class="tip" id="birthday"><br>
          </label>
        </div>

        <div><label class="box"><b>年龄：</b></label> <input type="age" class="tip"><br></div>
        <div><label class="box"><b>籍贯：</b></label>
            <select name="province" id="province" onchange="getCity()" class="tip">
                <option value="">省份</option>
                <!-- 利用js把省份添加到下拉列表里-->
                <script type="text/javascript">
                    for (var i = 0; i < provinceArr.length; i++) {
                        document.write(
                            "<option value='" + i + "'>" + provinceArr[i] + "</option>"
                        );
                    }
                </script>

            </select>

            <select name="city" id="city" class="tip">
                <option value="" class="tip">城市：</option>
            </select><br></div>
        <div><label class="box"><b> 学历：</b></label>
            <select name="degree" class="tip" id="degree">
                <option value="0">大专</option>
                <option value="1" selected="selected">本科</option>
                <option value="2">硕士</option>
                <option value="">博士</option>
            </select><br></div>
        <div><label><b>薪资：</b>
            <input type="range" id="pay" name="pay" min="3000" max="30000" class="tip"></label>
            <span id="msg"></span><br></div>
        <div><label class="box"><b> 个人爱好：</b></label>
            <label><input type="checkbox" name="like" value="sing">唱歌 </label>
            <label><input type="checkbox" name="like" value="dance">跳舞</label>
            <label><input type="checkbox" name="like" value="swim">游泳</label>
            <br></div>
        <div><label><b><p>个人照片：</p></b></label>
            <p></p>
            <div id="test-image-preview" >
  
            </div>
            <p></p>
            <p>
                <input type="file" id="test-image-file" name="test" class="tip">
            </p>
            <p id="test-file-info"></p>
            <!-- 个人简介模块 -->
            <div>
                <label><b> 个人简介：</b>
                    <textarea name="intro" cols="50" rows="10" style="vertical-align:middle"></textarea>
                </label>
            </div>
         <div class="button">
             <button type="submit" name="anyou"> 提交</button>
            <button type="reset" name="anyou"> 重填</button>
        </div>
        </div>
    </form>
</div>
</body>
<!-- 1 联动籍贯显示js代码 -->
<script>
    //当省份的选择发生变化时调用 该方法   将市县加载到下拉选择框
    function getCity() {
        //1.获取省份选择框的对象
        var provincesobj = document.getElementById("province"); //2.获取市县选择框的对象
        var cityobj = document.getElementById("city"); //3.获取被选择的省份的索引
        var index = provincesobj.selectedIndex; //   alert(provincesobj[index].value + "," + provincesobj[index].text); //4.通过省份的索引获取它的value值，value值也是它在数组的索引值

        var value = provincesobj[index].value; //5.获取对应省份的市县数组

        var cityName = cityArr[value]; //   alert(cityName); //6.将下拉框清楚索引为0之后的，只保留第一个
        cityobj.length = 1; //通过循环遍历市县元素给下拉框赋值
        for (var i = 1; i < cityArr[value].length; i++) {
            cityobj.options[cityobj.options.length] = new Option(cityName[i], i);
        }
    }
</script>
<!-- 2薪资滑块显示js代码 -->
<script>
    var msg = document.getElementById("msg"); // 根据id值找到span元素
    window.onload = function () {
        msg.innerHTML = document.getElementById("pay").value; // 获取区间域初始value值
    }
    document.getElementById("pay").onchange = function () {
        msg.innerHTML = this.value; // 将当前区间域的value作为span元素的内容
    }
</script>
<!-- 3 预览图片的js代码 -->
<script>
    var fileInput = document.getElementById('test-image-file');
    var info = document.getElementById('test-file-info');
    var preview = document.getElementById('test-image-preview');
    fileInput.addEventListener('change', function () { // 监听change事件
        preview.style.backgroundImage = ''; // 清除背景图片
        if (!fileInput.value) {
            info.innerHTML = '没有选择文件';
            return;
        }
        var file = fileInput.files[0]; // 获取File引用
        // 获取File信息:
        info.innerHTML = '文件: ' + file.name + '<br>' + '大小: ' + file.size + '<br>' + '修改: ' + file.lastModifiedDate;
        if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
            alert('不是有效的图片文件!');
            return;
        }
        var reader = new FileReader(); // 读取文件
        reader.onload = function (e) { // 发起一个异步操作来读取文件内容
            var data = e.target.result; // data串形如： '...(base64编码)...'
            preview.style.backgroundImage = 'url(' + data + ')';
        };
        reader.readAsDataURL(file); // 以DataURL的形式读取文件
    });
</script>
<script type="text/javascript">
    for (var i = 0; i < provinceArr.length; i++) {
        document.write(
            "<option value='" + i + "'>" + provinceArr[i] + "</option>"
        );
    }
</script>
</html>

